<template>
  <v-chart
      ref="graphRef"
      :autoresize="true"
      :option="chartOption"/>
</template>

<script setup>
import {ref, reactive, watch, onMounted} from "vue";
import {defineProps} from 'vue';
import {getCurrentInstance} from 'vue';

const {proxy: ctx} = getCurrentInstance();
const props = defineProps({data: Array, type: String})
const groupedStats = ref([]);
const transformedData = ref({});
const xAxis = ref();
const dy_data = ref([]);
const xhs_data = ref([]);
const zh_data = ref([]);
const wxgzh_data = ref([]);
const wxsph_data = ref([]);
// 将数据转换为可用数据
const fix_data = () => {
  const groupedData = props.data.map(platform => {
    const groupedStats = {};
    platform.stats.forEach(stat => {
      Object.keys(stat).forEach(key => {
        if (!groupedStats[key]) {
          groupedStats[key] = [];
        }
        groupedStats[key].push(stat[key]);
      });
    });
    return {platform_name: platform.platform_name, groupedStats};
  });
  groupedStats.value = groupedData;
// 将数据按照对应的平台分组
  const platform_map = {"抖音": 'dy', "小红书": 'xhs', "知乎": 'zh', "微信公众号": 'wxgzh', "微信视频号": 'wxsph'};
  const transformedObj = {};
  groupedData.forEach(item => {
    const {platform_name, groupedStats} = item;
    transformedObj[platform_map[platform_name]] = groupedStats;
  });
  const type_map = {
    "播放量": 'view_count',
    "评论量": 'comment_count',
    "收藏量": 'collect_count',
    "点赞量": 'like_count',
    "转发量": 'share_count',
  }
  transformedData.value = transformedObj;
  xAxis.value = transformedData.value.xhs.date;
  dy_data.value = transformedData.value.dy[type_map[props.type]];
  xhs_data.value = transformedData.value.xhs[type_map[props.type]];
  zh_data.value = transformedData.value.zh[type_map[props.type]];
  wxgzh_data.value = transformedData.value.wxgzh[type_map[props.type]];
  wxsph_data.value = transformedData.value.wxsph[type_map[props.type]];
}
//----------------------------------------------------------------
// 当初次加载页面时
fix_data()
//----------------------------------------------------------------
// 当prop.type变化时
const graphRef = ref()
watch(props, () => {
  fix_data()
  console.log(xhs_data.value)
  ctx.$refs.graphRef.setOption({
    grid: {
      left: '40',
      right: '20',
      top: '20',
      bottom: '100',
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      textStyle: {
        color: '#4E5969',
      },
    },
    xAxis: {
      type: 'category',
      data: xAxis.value,
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: isDark ? '#3f3f3f' : '#A9AEB8',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: '#86909C',
        },
        interval(idx) {
          if (idx === 0) return false;
          if (idx === xAxis.value.length - 1) return false;
          return true;
        },
      },
      axisLabel: {
        color: '#86909C',
        formatter(value, idx) {
          return `${value.substring(5)}`;
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#86909C',
        formatter: '{value}',
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#3F3F3F' : '#E5E6EB',
        },
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params;
        return `<div>
          <p class="tooltip-title">${firstElement.axisValueLabel}</p>
          ${tooltipItemsHtmlString(params)}
        </div>`;
      },
      className: 'echarts-tooltip-diy',
    },
    series: [ {
      name: '新增用户',
      data: dy_data.value,
      type: 'line',
      smooth: true,
      showSymbol: false,
      color: isDark ? '#3D72F6' : '#246EFF',
      symbol: 'circle',
      symbolSize: 10,
      emphasis: {
        focus: 'series',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#E0E3FF',
        },
      },
    }
    ],
  }, true)
  console.log(dy_data.value)
  console.log(props.type)
})
const tooltipItemsHtmlString = (items) => {
  return items
      .map(
          (el) => `<div class="content-panel">
      <p>
        <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
        <span>${el.seriesName}</span>
      </p>
      <span class="tooltip-value">
      ${el.value}
      </span>
    </div>`
      )
      .join('');
};
const isDark = ref(true)
const chartOption = ref({
  grid: {
    left: '40',
    right: '20',
    top: '20',
    bottom: '100',
  },
  legend: {
    bottom: 0,
    icon: 'circle',
    textStyle: {
      color: '#4E5969',
    },
  },
  xAxis: {
    type: 'category',
    data: xAxis.value,
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: isDark ? '#3f3f3f' : '#A9AEB8',
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        color: '#86909C',
      },
      interval(idx) {
        if (idx === 0) return false;
        if (idx === xAxis.value.length - 1) return false;
        return true;
      },
    },
    axisLabel: {
      color: '#86909C',
      location: 'left',
      formatter(value, idx) {
        return `${value.substring(5)}`;
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#86909C',
      formatter: '{value}',
    },
    splitLine: {
      lineStyle: {
        color: isDark ? '#3F3F3F' : '#E5E6EB',
      },
    },
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    formatter(params) {
      const [firstElement] = params;
      return `<div>
          <p class="tooltip-title">${firstElement.axisValueLabel}</p>
          ${tooltipItemsHtmlString(params)}
        </div>`;
    },
    className: 'echarts-tooltip-diy',
  },
  series: [
    {
      name: '新增用户',
      data: dy_data.value,
      type: 'line',
      smooth: true,
      showSymbol: false,
      color: isDark ? '#3D72F6' : '#246EFF',
      symbol: 'circle',
      symbolSize: 10,
      emphasis: {
        focus: 'series',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#E0E3FF',
        },
      },
    }
  ],
});

</script>